<template>
  <div class="len-header">
    <div @click="goIndex()" class="logo"></div>
    <div class="menu">
      <Menu mode="horizontal" theme="light" active-name="1">
        <div v-for="me in menuArr">
          <MenuItem :name=me.arr @click.native="toIndex(me.url)">
            <!--<Icon></Icon>--><!--type="ios-paper" 图标后期再处理-->
            {{me.menu}}
          </MenuItem>
        </div>
      </Menu>
    </div>
    <div class="searchboxs">
      <input type="text" class="form-control" placeholder="请输入关键字..." v-model="search" @focus="show=true"
             @focusout=""/>
      <div v-show="show" class="searchmain">
        <div v-show="search">
          <p @click="choosewz">搜“<span>{{search}}</span>”相关文章</p>
          <p @click="choosejc">搜“<span>{{search}}</span>”相关教程</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        a: 1,
        theme1: 'light',
        menuArr: {},
        search: '',
        show: false,
      }
    },
    methods: {
      choosewz() {
        let word = this.search;
        this.$router.push(`/index/search/${word}`)
        this.$router.go(0)
        this.search = '';
      },
      choosejc() {
        let word = this.search;
        this.$router.push(`/resource/search/${word}`)
        this.$router.go(0)
        this.search = '';
      },
      getHeader() {
        this.$http.get('/api/blog/menu').then(response => {
          let arr = {};
          let data = response.data;
          for (let i in data) {
            let menu = {
              arr: 0,
              url: '',
              menu: ''
            };
            menu.arr = i;
            menu.url = data[i].url;
            menu.menu = data[i].name;
            arr[i] = menu;
          }
          this.menuArr = arr;
        });
      },
      init() {
        //标题
        this.getHeader();
      },
      toIndex(url) {
        this.$router.push(url);
      },
      goIndex() {
        this.$router.push('/')
      },
    },
    mounted() {
      this.init();
    }
  }
</script>
<style>
  .len-header {
    background: white
  }

  .len-header .menu {
    margin-left: 35%;
    margin-right: 35%;
  }

  .len-header .logo {
    background: url("../../assets/logo.png") no-repeat;
    width: 150px;
    height: 55px;
    position: absolute;
    left: 15%;
    top: -1%;
  }

  .len-header .searchboxs {
    width: 10%;
    height: 55px;
    position: absolute;
    right: 25%;
    top: 0%;
  }

  .form-control {
    width: 250px;
    height: 35px;
    margin: 10px 0;
  }

  .searchmain {
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 999;
    padding: 10px 0;
  }
  .searchmain div p {
    cursor: pointer;
    font-size: 15px;
  }
  .searchmain span {
    color: #D00010;
  }

  @media screen and (max-width: 768px) {
    .len-header .menu {
      width: 100%;
      margin: 0 auto;
      /*margin-left: 15%;*/
      /*border:1px solid red;*/
    }

    .len-header .logo {
      /*background: url("../../assets/logo.png") no-repeat;
      width: 150px;
      height: 55px;*/
      position: relative;
      left: 50%;
      top: -1%;
      margin-left: -75px;

    }

    .ivu-menu-light {
      /*border:1px solid red;*/
      margin: 0 auto;

    }
    .ivu-menu-light li {
      text-align: center;
      /*border:1px solid red;*/
      width: 25%;
    }
    .len-header .searchboxs {
      display: none;
    }
  }
</style>
<style scoped>
  .ivu-menu-horizontal.ivu-menu-light:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: white;
    position: absolute;
    bottom: 0;
    left: 0;
  }


</style>
